
 <template>
  <div>
    <div>
      <!-- 首页上半区保留 -->
    </div>
    <!-- 下半区切换栏 -->
    <div>
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="qie_btn(index)"
        :class="{ active: qie === index }"
      >
        {{ tab }}
      </button>

      <!-- 商品列表 -->
      <div>
        <div v-for="item in fil" :key="item.id">
          <img src="item.img" width="100px" height="100px" />
          <span>{{ item.name }}</span>
          <span>¥{{ item.price }}</span>
          <button @click="add_btn(item)">+</button>
          <!-- 点击添加到购物车的按钮 -->
          <button @click="del(item)" :disabled="getCart(item).num <= 0">
            -
          </button>
          <span>购物车:{{ getCart(item).num || 0 }}</span>
        </div>
      </div>

      <!-- 购物车列表 -->
      <div>
        <h3>购物车</h3>
        <div v-for="item in cart" :key="item.id">
          <img src="item.img" width="100px" height="100px" />
          <span>{{ item.name }}</span>
          <span>数量{{ item.num }}</span>
          <span>小计{{ (item.price * item.num).toFixed(2) }}</span>
          <button @click="jia(item)">+</button>
          <button @click="jian(item)" :disabled="getCart(item).num <= 0">
            -
          </button>
        </div>
        <!-- 总价 -->
        <div v-if="cart.filter((item) => item.num > 0).length > 0">
          总价:{{ totprice.toFixed(2) }}
        </div>
        <div v-if="cart.filter((item) => item.num > 0)"></div>
      </div>
    </div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      qie: 0,

      tabs: ["热门推荐", "新品推荐", "清凉一下", "呵护肠胃"],
      arr: [
        {
          id: 0,
          img: require('../图片/r1.png'),
          name: "京都念慈安",
          price: 28.3,
          num: 0,
        },
        {
          id: 1,
          img: "require('../图片/r2.png')",
          name: "999感冒灵",
          price: 13.7,
          num: 0,
        },
        {
          id: 2,
          img: "require('../图片/x1.png')",
          name: "汤臣倍健蛋白粉",
          price: 249,
          num: 1,
        },
        {
          id: 3,
          img: "require('../图片/x2.png')",
          name: "维诺健蛋白粉",
          price: 199,
          num: 1,
        },
        {
          id: 4,
          img: "require('../图片/q1.png')",
          name: "藿香正气口服液",
          price: 29.45,
          num: 2,
        },
        {
          id: 5,
          img: "require('../图片/q2.png')",
          name: "上海中华风油精",
          price: 7.3,
          num: 2,
        },
        {
          id: 6,
          img: "require('../图片/w1.png')",
          name: "汤臣倍健益生菌粉",
          price: 80,
          num: 3,
        },
        {
          id: 7,
          img: "require('../图片/r2.png')",
          name: "健胃消食片",
          price: 13,
          num: 3,
        },
      ],
      cart: [],
    };
  },
  computed: {
    fil() {
      return this.arr.filter((item) => item.num === this.qie);
    },
    totprice() {
      return this.cart.reduce((sum, item) => {
        if (item.num > 0) {
          sum += item.price * item.num;
        }
        return sum;
      }, 0);
    },
  },
  methods: {
    //切换栏按钮
    qie_btn(index) {
      this.qie = index;
    },
    //添加到购物车
    add_btn(i) {
      const c = this.cart.find((car) => car.id === i.id);
      if (c) {
        c.num += 1;
      } else {
        this.cart.push({ ...i, num: 1 });
      }
    },
    jia(i) {
      const c = this.cart.find((car) => car.id === i.id);
      if (c) {
        c.num += 1;
      } else {
        this.cart.push({ ...i, num: 1 });
      }
    },
    //减
    del(item) {
      const c = this.cart.find((x) => x.id === item.id);
      if (c) {
        c.num > 1
          ? c.num--
          : (this.cart = this.cart.filter((x) => x.id !== item.id));
      }
    },
    jian(item) {
      const c = this.cart.find((x) => x.id === item.id);
      if (c) {
        c.num > 1
          ? c.num--
          : (this.cart = this.cart.filter((x) => x.id !== item.id));
      }
    },
    //获取购物车中的商品信
    getCart(item) {
      return this.cart.find((x) => x.id === item.id) || { num: 0 };
    },
  },
};
</script>
<style lang='less' scoped>
</style>